<template>
  <page>
    <div class="map_container">
      <div id="container" class="map" tabindex="0"></div>
      <div class="poi_info">
        <button class="button_primary" @click="eventUpdateCarPosition">推送实时位置</button>
        <!-- <div class="cell">
          速度:{{carInfo.speed}}
        </div>
        <div class="cell">
          航向:{{carInfo.course}}
        </div> -->
        <!-- <div class="cell">
          下站预计时间:{{carInfo.course}}
        </div> -->
      </div>
    </div>
  </page>
</template>
<script>
import maploader from '@/util/maploader'
import { getCarPostion, updateCarPostion } from '@/api/map'
export default {
  data () {
    return {
      carInfo: {
        speed: 0,//公里km/时
        course: 0//航向角
      },
      isPutingPosition: false,
      putingTimer: null
    }
  },
  methods: {
    eventUpdateCarPosition () {
      this.isPutingPosition = !this.isPutingPosition
      if (this.isPutingPosition) {
        this.doUpdateCarPostion(true);
      }
    },
    // doUpdateCarPostion(start){
    //   if(start){
    //     this.putingTimer = 
    //   }else{

    //   }
    // }
  },
  mounted () {
    var mapPoints = [{
      stationName: '立汇美罗湾',
      sort: 1,
      position: [126.69549, 45.696359],
      plantime: '6:30',
      employees: []
    },
    {
      stationName: '三合路加油站',
      sort: 2,
      position: [126.663917, 45.715355],
      plantime: '6:35',
      employees: []
    },
    {
      stationName: '乐园街',
      sort: 3,
      position: [126.654499, 45.718543],
      plantime: '6:37',
      employees: []
    },
    {
      stationName: '农林头道街',
      sort: 4,
      position: [126.646663, 45.722396],
      plantime: '6:40',
      employees: []
    },
    {
      stationName: '大自然',
      sort: 5,
      position: [126.634608, 45.726559],
      plantime: '6:43',
      employees: []
    },
    {
      stationName: '乐买超市',
      sort: 6,
      position: [126.629283, 45.728387],
      plantime: '6:45',
      employees: []
    },
    {
      stationName: '和兴路宝食林',
      sort: 7,
      position: [126.61362, 45.733784],
      plantime: '6:50',
      employees: []
    },
    {
      stationName: '大发加油站',
      sort: 8,
      position: [126.603628, 45.737639],
      plantime: '6:53',
      employees: []
    },
    {
      stationName: '前进路与钢铁街交口',
      sort: 9,
      position: [126.591175, 45.744705],
      plantime: '7:00',
      employees: []
    },
    {
      stationName: '达道街与河鼓街交口',
      sort: 10,
      position: [126.593605, 45.7545],
      plantime: '7:05',
      employees: []
    },
    {
      stationName: '江北前进道口转盘道',
      sort: 11,
      position: [126.551077, 45.807118],
      plantime: '7:20',
      employees: []
    },
    {
      stationName: '公司',
      sort: 12,
      position: [126.501903, 45.791241],
      plantime: '7:45',
      employees: []
    }
    ]

    // const me = this;
    maploader.load(['AMap.Driving', 'AMap.ToolBar']).then(({ AMap }) => {
      var map = new AMap.Map('container', {
        zoom: 16,
        scrollWheel: true,
        resizeEnable: true,
        center: [mapPoints[0].position[0], mapPoints[0].position[1]], //[116.397428, 39.90923], //地图中心点
      })
      //构建小车
      var car = new AMap.Marker({
        position: [mapPoints[0].position[0], mapPoints[0].position[1]],
        icon: "http://webapi.amap.com/images/car.png",
        offset: new AMap.Pixel(-26, -13),
        autoRotation: true
      });
      car.setMap(map);
      //构造路线导航类
      var driving = new AMap.Driving({
        map: map,
      });

      var AMapPoints = []
      mapPoints.forEach(x => {
        AMapPoints.push(new AMap.LngLat(x.position[0], x.position[1]));
      });

      const startPoint = AMapPoints.shift(); //先进后出
      const endPoint = AMapPoints.pop(); //后进先出
      driving.search(startPoint, endPoint, {
        waypoints: AMapPoints
      }, function (status) {
        // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
        if (status === 'complete') {
          // log.success('绘制驾车路线完成')
        } else {
          //log.error('获取驾车数据失败：' + result)
        }
      });



      function updateCarPosition (lng, lat) {
        car.setPosition(new AMap.LngLat(parseFloat(lng), parseFloat(lat))); //更新点标记位置
        // map.setCenter(new AMap.LngLat(parseFloat(lng), parseFloat(lat))); //设置地图中心点
      }
      setInterval(() => {
        getCarPostion().then(res => {
          if (res.position !== null) {
            try {
              res.position = JSON.parse(res.position)
              updateCarPosition(res.position[0], res.position[1]);
            } catch (error) {
              console.log(error)
            }

          }
        })
      }, 1000);
    })


  },
  methods: {

  }
}
</script>
<style lang="scss" scoped>
.map_container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  .map_picker_box {
    margin-top: 5px;
    height: 2rem;
    width: 100%;
    .map_picker_input {
      width: 100%;
      padding: 5px 5px;
      height: 2rem;
      font-size: 1.3rem;
      box-sizing: border-box;
    }
    .poi_info {
      background: #fff;
    }
  }
  .map {
    flex: 1;
    margin-top: 5px;
    margin-bottom: 5px;
    width: 100%;
  }
  .poi_info {
    font-size: 1.2rem;
    box-sizing: border-box;
    .button_primary {
      text-align: center;
      width: 100%;
      border: 1px solid #5a95e2;
      font-size: 1.2rem;
      color: #fff;
      background-color: #5a95e2;
      height: 2.5rem;
      border-radius: 1rem;
      &:active {
        background-color: #246dce;
      }
    }
    .cell {
      padding: 0 0.5rem;
      border-bottom: 1px solid #efefef;
      width: 100%;
      min-height: 1.5rem;
      line-height: 1.4rem;
      :last-child {
        border-bottom: 0;
      }
    }
  }
}

.amap_lib_placeSearch .poibox.highlight {
  background-color: #cae1ff;
}

.amap_lib_placeSearch .poi-more {
  display: none !important;
}
</style>